import React from "react";
import { Button } from "antd";
import defaultOpts from "./defaultData";
import OptionItem from "./Item";
import "./index.less";
import { OTHER } from "../../../constants/form";
import _u from '../../../utils';
import {WeaLocaleProvider} from "ecCom";
import { SortableContainer } from 'react-sortable-hoc';

const getLabel = WeaLocaleProvider.getLabel;

export default class OptionContent extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    const { options, onChange } = this.props;

    return (
      <Content
        {...this.props}
        axis='y'
        shouldCancelStart={val => {
          if (val.target.className !== 'anticon anticon-bars'){
            return true;
          }
        }}
        getHelperDimensions={() => {
          return {width:300,height:30}
        }}
        onSortEnd={({oldIndex, newIndex}) => {
          const newOptions = _u.arrayMove(mobx.toJS(options),oldIndex,newIndex);
          onChange(newOptions)
        }}
      />
    )
  }
}

@SortableContainer
class Content extends React.Component {
  constructor(props) {
    super();

    const { options } = props;

    this.state = {
      options,
      index: options.length,
      hasOther: true
    };
  }

  componentWillReceiveProps(nextProps) {
    const { multi } = nextProps;
    const { options } = this.state;
    const hasOther = options.find(opt => OTHER === opt.key);

    this.setState({options: nextProps.options});
    if(multi !== this.props.multi) {
      let index = null;

      if(!multi) {
        options.forEach((opt, i) => {
          if(opt.selected && index === null) {
            index = i;
          } else {
            opt.selected = false;
          }
        });
      }

      this.setState({ multi });
      this.onOptionsChange(options);
    }

    this.setState({ hasOther });
  }

  onOptionAdd(isOther) {
    const { options, index } = this.state;
    const newIndex = index + 1;

    if(isOther) {
      options.push({
        key: OTHER,
        showname: getLabel('502267','其他') ,
        selected: false
      });
    } else {
      options.push({
        key: String(newIndex),
        showname: `${getLabel('502263','选项') +newIndex}`,
        selected: false
      });

      this.setState({
        index: newIndex
      });
    }

    this.onOptionsChange(options);
  }

  onOptionRemove = opt => {
    const index = this.findOptionIndex(opt.key);
    const { options } = this.state;

    options.splice(index, 1);
    this.onOptionsChange(options);
  }

  onOptionChange = item => {
    const { multi } = this.props;
    const { options } = this.state;
    const index = this.findOptionIndex(item.key);

    options[index] = item;

    if(!multi) {
      options.forEach((opt, i) => {
        if (i !== index) {
        	opt.selected = item.selected ? false : opt.selected;
        }
      });
    }

    this.onOptionsChange(options);
  }

  onOptionsChange(options) {
    this.setState({ options });
    this.props.onChange(options);
  }

  addNormalOption = () => {
    this.onOptionAdd(false);
  }

  addOtherOption = () => {
    this.onOptionAdd(true);
  }

  findOptionIndex(key) {
    return this.state.options.findIndex(opt => opt.key === key);
  }

  render() {
    const { options, hasOther } = this.state;

    return (
      <div className='wea-edc-opt-content'>
        {options.map((opt,index) => (
          <OptionItem
            key={opt.key}
            item={opt}
            index={index}
            onRemove={this.onOptionRemove}
            onChange={this.onOptionChange}
          />
        ))}
        <Button icon='plus' onClick={this.addNormalOption}>
          <span>{getLabel('502268','添加选项') }</span>
        </Button>
        <div style={{ textAlign: 'right', paddingTop: 5 }}>
          {hasOther ? null : <a onClick={this.addOtherOption}>{getLabel('502269','添加其他') }</a>}
        </div>
      </div>
    );
  }
}

OptionContent.defaultProps = {
  multi: false,
  options: defaultOpts,
  onChange: () => { }
};